<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        1.容器
        //将容器内的项目改变为行内元素
        display：flex;
        //内容对齐（水平==主轴）
        justify-content
          flex-start--在主轴方向起始位置对齐
          flex-end--在主轴方向结束位置对齐
          center--在主轴方向中间位置对齐
          space-between--两端对齐
          space-around--分散居中对齐
        //交叉轴对齐 
        //align-items:
            flex-start--在上对齐
            flex-end--在下对齐
            center--中心对齐
        //改变主轴的对齐方式或者方向    
        //flex-direction    
             row--默认对齐方式，从左往右
             row-reverse--从右到左
             column--将纵轴的对齐方式赋予主轴 y=x 从上往下
             column-reverse-- 改变方向 从下往上
        //纵轴换行方式
        //flex-wrap   
            nowrap--默认不换行
            wrap--换行
            wrap-reverse--换华反转
        //换行方案
            align-content：
              flex-start--起始位置换行
              flex-end--结束位置换行
              center--中间换行 
              space-between--各行平均分布
              space-around--分散居中对齐换行，各行，分散
              stretch-- 默认。各行将会伸展以占用剩余的空间。
        2.项目
        */
        ul{
             /* 浮动 */
            display: flex;
            align-content:flex-start;
            /* flex-wrap: wrap; */
            align-items: flex-start;
            justify-content: flex-start;
            /* flex-direction: column; */
            list-style: none;
            padding: 0;
            border: 0;
            border: 1px solid #aaa;
            width: 600px;
            height: 400px;
        }
        ul li{
            /* display:inline-block; */
            width: 50px;
            height: 30px;
            background: red;
            /* margin: 2px 5px; */
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>6</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>6</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>6</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>6</li>
    </ul>
</body>
</html>